<template>
  <div style="width: 100%;">
      <div style="margin-bottom: 15px">
          <el-descriptions class="margin-top" title="丹阁基本信息" :column="3"  border>
              <template slot="extra">
                  <el-button type="primary" size="small" @click="showPersonsNoInstitution">人员</el-button>
              </template>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-office-building"></i>
                      宗门
                  </template>
                  {{alchemy_attic.sect_name}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-postcard"></i>
                      名称
                  </template>
                  {{ alchemy_attic.name }}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-magic-stick"></i>
                      等级
                  </template>
                  {{alchemy_attic.attic_rank_name}}
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-user"></i>
                      管理者
                  </template>
                  <el-tag size="small" ><i style="cursor: pointer" @click="showManager"  v-if="!alchemy_attic.manager" class="el-icon-loading"></i>{{ alchemy_attic.manager }}</el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                  <template slot="label">
                      <i class="el-icon-reading"></i>
                      说明
                  </template>
                  {{alchemy_attic.brief_introduction}}
              </el-descriptions-item>
          </el-descriptions>
      </div>
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible2"
          width="60%"
      >
          <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
              <div>
                  <template>
                      <el-select @change="getName" ref="labelRef" v-model="manager" filterable placeholder="请选择">
                          <el-option
                              v-for="item in managers"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                          </el-option>
                      </el-select>
                  </template>
              </div>
              <div>
                  <el-button type="success" @click="setManager" round>任命</el-button>
              </div>
          </div>
      </el-dialog>
      <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="60%"
      >
          <div>
              <el-table
                  :data="persons"
                  border
                  :row-style="{height: '0'}"
                  :cell-style="{padding: '3px'}"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                  style="width: 100%;font-size: 15px">
                  <el-table-column
                      prop="seq_no"
                      label="序号"
                      min-width="16%">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="姓名"
                      min-width="21%">
                  </el-table-column>
                  <el-table-column
                      prop="person_rank_name"
                      label="等级"
                      min-width="21%">
                  </el-table-column>
                  <el-table-column
                      prop="realm_name"
                      min-width="21%"
                      label="境界">
                  </el-table-column>
                  <el-table-column
                      min-width="21%"
                      label="操作">
                      <template slot-scope="scope">
                          <el-button size="small" type="primary" @click="commissionHandler(scope.row)">任命</el-button>
                      </template>
                  </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
                  <div>
                  </div>
                  <div>
                      <el-pagination
                          background
                          @current-change="currentChange2"
                          @size-change="sizeChange2"
                          layout="sizes,prev, pager, next, jumper, ->, total"
                          :pager-count="5"
                          :total="total2">
                      </el-pagination>
                  </div>
              </div>
          </div>
<!--          <span slot="footer" class="dialog-footer">
              <el-button size="small" @click="dialogVisible = false">取 消</el-button>
              &lt;!&ndash;              <el-button size="small" type="primary" @click="addPersonMember">确 定</el-button>&ndash;&gt;
            </span>-->
      </el-dialog>

      <div>
          <el-table
              :data="alchemy_attic_members"
              stripe
              border
              size="small"
              style="width: 100%;"
              @selection-change="handleSelectionChange">
              <el-table-column
                  type="selection"
                  :selectable="selectable"
                  width="55">
              </el-table-column>
              <el-table-column
                  prop="seq_no"
                  label="序号"
                  align="center"
                  width="55">
              </el-table-column>
              <el-table-column prop="userFace" label="头像" width="70">
                  <template v-slot="scope">
                      <!--            <img :src="scope.row.userFace" alt="" width="40" height="40">-->
                      <el-popover placement="top-start" trigger="hover">
                          <div class="row_reserve">
                              <img class="big-img" :src="scope.row.userFace"/>
                          </div>
                          <div slot="reference">
                              <img class="td-img" width="40" height="40" :src="scope.row.userFace" />
                          </div>
                      </el-popover>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="name"
                  label="姓名"
                  width="130">
              </el-table-column>
              <el-table-column
                  prop="sex"
                  label="性别"
                  width="50">
              </el-table-column>
              <el-table-column
                  prop="idCard"
                  label="身份证号码"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="birthday"
                  label="出生日期"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="phone"
                  label="手机号码"
                  width="140">
              </el-table-column>
              <el-table-column
                  prop="email"
                  label="电子邮箱"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="region"
                  label="区域"
                  width="150">
              </el-table-column>
              <el-table-column
                  prop="person_rank_name"
                  label="等级"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="realm_name"
                  label="境界"
                  width="100">
              </el-table-column>
              <el-table-column
                  prop="wealth"
                  label="财富"
                  width="100">
                  <template slot-scope="scope">
                      <el-popover
                          placement="right"
                          width="200"
                          trigger="click">
                          <el-table  :data="scope.row.wealth.wealth" style="width: 100%"><!--{"丹药": 30, "武器": 30, "秘籍": 30, "上品灵石": 30, "下品灵石": 3000, "中品灵石": 300, "极品灵石": 0}-->
                              <el-table-column width="100" prop="name" label="物品"/>
                              <el-table-column width="100" prop="num" label="数量"/>

                          </el-table>
                          <el-button size="small" type="success" round slot="reference">{{scope.row.storage_space}}</el-button>
                      </el-popover>
                  </template>
              </el-table-column>
              <el-table-column
                  prop="createdate"
                  label="创建时间"
                  width="150">
              </el-table-column>

              <el-table-column
                  width="180"
                  prop="isDelete"
                  label="操作">
                  <template slot-scope="scope">
<!--                      <el-tooltip placement="top">
                          <div slot="content">稍后系统会自动将账号，密码相关信息通过短信或邮件的方式发送！</div>
                          <el-button size="small" type="primary" @click="generateAccount(scope.row)">账号发放</el-button>
                      </el-tooltip>-->
                      <div style="display: flex;justify-content: flex-start;width: 100%;">
                        <div>
                          <el-button v-if="scope.row.isDelete=='1'" size="small" type="danger" @click="deleteHandler(scope.row)">删除</el-button>
                        </div>
                        <div>
                          <el-button @click="showPellet(scope.row.id)" size="small" style="padding:0 0 0 0;min-width: 32px;min-height: 32px;margin-left: 10px"  type="primary" plain>
                            <img  class="td-img" width="32" height="32" :src="pellet_furnace" style="border: none"/>
                          </el-button>
                        </div>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
          <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
              <div>
                  <el-button size="small" type="danger"
                             :disabled="this.multipleSelection.length===0"
                             @click="deleteMany"
                  >批量删除</el-button>
              </div>
              <div>
                  <el-pagination
                      background
                      @current-change="currentChange"
                      @size-change="sizeChange"
                      layout="sizes,prev, pager, next, jumper, ->, total"
                      :total="total">
                  </el-pagination>
              </div>
          </div>
      </div>
<!--      炼制丹药-->
      <el-dialog
          :title="title2"
          :visible.sync="dialogVisible3"
          width="60%"
      >
          <div>
              <el-table
                  :data="home_remedies"
                  border
                  :row-style="{height: '0'}"
                  :cell-style="{padding: '3px'}"
                  :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
                  style="width: 100%;font-size: 15px">
                  <el-table-column
                      prop="seq_no"
                      label="序号"
                      min-width="6%">
                  </el-table-column>
                  <el-table-column
                      prop="name"
                      label="丹方名称"
                      min-width="12%">
                  </el-table-column>
                  <el-table-column
                      prop="home_remedy_rank_name"
                      label="等级"
                      min-width="10%">
                  </el-table-column>
                  <el-table-column
                      prop="sect_name"
                      min-width="12%"
                      label="宗门">
                  </el-table-column>
                  <el-table-column
                      prop="alchemy_attic_name"
                      min-width="12%"
                      label="炼丹阁">
                  </el-table-column>
                <el-table-column
                    prop="content"
                    :show-overflow-tooltip="true"
                    min-width="19%"
                    label="内容">
                </el-table-column>
                  <el-table-column
                      prop="brief_introduction"
                      :show-overflow-tooltip="true"
                      min-width="19%"
                      label="简介">
                  </el-table-column>
                  <el-table-column
                      min-width="10%"
                      label="操作">
                      <template slot-scope="scope">
                          <el-button size="small" type="primary" @click="alchemyHandler(scope.row)">
                              炼制<input type="hidden"  value="scope.row.content"/>
                          </el-button>

                      </template>
                  </el-table-column>
              </el-table>
              <div style="display: flex;justify-content: space-between;width: 100%;margin-top: 5px" >
                  <div>
                  </div>
                  <div>
                      <el-pagination
                          background
                          @current-change="currentChange3"
                          @size-change="sizeChange3"
                          :page-sizes="[3, 6, 12, 24]"
                          layout="sizes,prev, pager, next, jumper, ->, total"
                          :pager-count="5"
                          :total="total3">
                      </el-pagination>
                  </div>
              </div>
              <div class="tag-group" style="margin-top: 5px">
                  <span class="tag-group__title">材料： </span>
                  <el-tag style="margin-left: 5px"
                      v-for="item in items"
                      :key="item.label"
                      :type="item.type"
                      effect="plain">
                      {{ item.label }}
                  </el-tag>
                <el-progress style="margin-top: 8px" :text-inside="true" :stroke-width="20" :percentage="percentage" :color="customColors"></el-progress>
              </div>
              <p style="text-align: center; margin: 50px 0 20px">将药材添加到丹炉中</p>
              <div style="text-align: center">
                  <el-transfer
                      style="text-align: left; display: inline-block"
                      v-model="value4"
                      filterable
                      :left-default-checked="[2, 3]"
                      :right-default-checked="[1]"
                      :titles="['仓库', '丹炉']"
                      :button-texts="['到左边', '到右边']"
                      :format="{
                        noChecked: '${total}',
                        hasChecked: '${checked}/${total}'
                      }"
                      @change="handleChange"
                      :data="material">
                      <span slot-scope="{ option }">{{ option.label }}</span>
                      <el-pagination
                          small
                          slot="left-footer"
                          align="right"
                          @current-change="handleCurrentChange"
                          :current-page="page.pageNo"
                          :page-size="page.pageSize"
                          :total="page.total"
                          :pager-count="5"
                          layout="prev, pager, next"
                      ></el-pagination>
<!--                      <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>-->
                      <el-button class="transfer-footer" @click="refine" slot="right-footer" size="small">炼丹</el-button>
                  </el-transfer>
              </div>

          </div>
          <!--          <span slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
                        &lt;!&ndash;              <el-button size="small" type="primary" @click="addPersonMember">确 定</el-button>&ndash;&gt;
                      </span>-->
      </el-dialog>
  </div>
</template>
<script >
export default {
    name:"AlchemyAtticMember",
    data(){
        const generateData = _ => {
            const data = [];
            for (let i = 1; i <= 15; i++) {
                data.push({
                    key: i,
                    label: `备选项 ${ i }`,
                    disabled: i % 4 === 0
                });
            }
            return data;
        };
        return {
            sect_id:JSON.parse(window.sessionStorage.getItem("userInfo")).sect_id,
            alchemy_attic:{},
            type:"alchemy_attic",
            institution_id:"",
            alchemy_attic_members:[],
            showAdvanceSearchVisible:false,
            multipleSelection:[],
            search_text:"",
            total:0,
            size:10,
            currentPage:1,

            total2:0,
            size2:10,
            currentPage2:1,

            total3:0,
            size3:3,
            currentPage3:1,

            total4:0,
            size4:4,
            currentPage4:1,

            percentage:0,
            customColors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#6f7ad3', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#45B86A', percentage: 100}
            ],
            page: { pageNo: 1, pageSize: 30, total: 0 },

            dialogVisible:false,
            dialogVisible2:false,
            dialogVisible3:false,
            title:"人员",
            title2:"炼制丹药",
            persons:[],
            manager:"",
            manager_name:"",
            managers:[],
            home_remedies:[],
            person_id:"",
            medicinalPellet:{
                name:"",
                sect_id:"",
                sect_name:"",
                alchemy_attic_id:"",
                alchemy_attic_name:"",
                brief_introduction:"",
                material_ids:[],

            },
            material:[],
            items: [
                /*{ type: '', label: '标签一' },
                { type: 'success', label: '标签二' },
                { type: 'info', label: '标签三' },
                { type: 'danger', label: '标签四' },
                { type: 'warning', label: '标签五' }*/
            ],
            data: generateData(),
            value: [1],
            value4: [1],
            renderFunc(h, option) {
                return <span>{ option.key } - { option.label }</span>;
            }
        }
    },
    computed:{
      pellet_furnace(){
        return "/webp_file_details?service_id=1&service_type=pellet_furnace&date="+this.$store.state.currentAdmin.time;
      }
    },
    methods:{
        //初始化丹阁基本信息
        initAlchemyAttic(){
            this.$getRequest("sys/alchemy_attic/info?sect_id="+this.sect_id).then(resp=>{
                if(resp){
                    this.alchemy_attic = resp.obj;
                    this.initAlchemyAtticMember();
                    this.initPersonsNoInstitution();
                    this.initHomeRemedy()
                }
            })
        },
        //初始化丹阁成员信息
        initAlchemyAtticMember(){
            this.$getRequest("/sys/alchemy_attic/member_query?id="+this.alchemy_attic.id+"&type="+this.type+"&currentPage="+this.currentPage+"&size="+this.size).then(resp=>{
                if(resp){
                    this.alchemy_attic_members = resp.data;
                    this.total = resp.total;
                }
            })
        },
        //每页条数事件
        sizeChange(size){
            this.size = size;
            this.initAlchemyAtticMember();
        },
        //当前页事件
        currentChange(currentPage){
            this.currentPage = currentPage;
            this.initAlchemyAtticMember();
        },
        //每页条数事件
        sizeChange2(size){
            this.size2 = size;
            this.initPersonsNoInstitution();
            this.dialogVisible = true;
        },
        //当前页事件
        currentChange2(currentPage){
            this.currentPage2 = currentPage;
            this.initPersonsNoInstitution();
            this.dialogVisible = true;
        },
        //每页条数事件
        sizeChange3(size){
            this.size3 = size;
            this.initHomeRemedy();
        },
        //当前页事件
        currentChange3(currentPage){
            this.currentPage3 = currentPage;
            this.initHomeRemedy();
        },
        //多选
        handleSelectionChange(val){
            this.multipleSelection = val;
        },
        //丹阁成员删除
        deleteHandler(data){
            this.$confirm('此操作将永久删除['+data.name+']该人员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$deleteRequest("/sys/alchemy_attic/deletePersonMember?person_id="+data.id+"&institution_id="+this.alchemy_attic.id+"&type="+this.type).then(resp=>{
                    if(resp){
                        this.initAlchemyAttic();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //丹阁成员批量删除
        deleteMany(){
            this.$confirm('此操作将永久删除['+this.multipleSelection.length+']个人员, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let ids = "?&institution_id="+this.alchemy_attic.id+"&type="+this.type+"&";
                this.multipleSelection.forEach(item=>{
                    ids+= "person_ids=" + item.id + "&";
                });
                ids = ids.substring(0,ids.length-1);
                this.$deleteRequest("/sys/alchemy_attic/deletePersonMembers/"+ids).then(resp=>{
                    if(resp){
                        this.initAlchemyAtticMember();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },

        showPersonsNoInstitution(){
          this.total2 = 0;
          this.size2 = 10;
          this.currentPage2 = 1;
          this.initPersonsNoInstitution();
          this.dialogVisible = true;
        },
        showManager(){
            this.manager="";
            this.dialogVisible2 = true;
        },
        showPellet(id){
            this.dialogVisible3 = true;
            this.person_id = id;
        },
      //设置管理者
        setManager(){
            this.$postRequest("/sys/alchemy_attic/addPersonMember?type="+this.type+"&person_id="+this.manager+"&institution_id="+this.alchemy_attic.id+"&manager_name="+this.manager_name).then(resp=>{
                if(resp){
                    this.$message.success(resp.message);
                    this.initAlchemyAttic();
                    this.dialogVisible2 = false;
                }
            });
        },
        initPersonsNoInstitution(){
            this.$getRequest("/sys/alchemy_attic/getPersonsNoInstitution?type="+this.type+"&institution_id="+this.alchemy_attic.id+"&sect_id="+this.sect_id+"&currentPage="+this.currentPage2+"&size="+this.size2).then(resp=>{
                //Object.assign(this.persons,resp.data);
                this.persons = resp.data;
                this.total2 = resp.total;
            })
        },
        //序号递增
        indexMethod(index) {
            let limitpage = this.size; // 每页条数
            let curpage = this.currentPage; // 当前页码
            return index + 1 + (curpage - 1) * limitpage;
        },
        //任命
        commissionHandler(data){
            this.$postRequest("/sys/alchemy_attic/addPersonMember?type="+this.type+"&person_id="+data.id+"&institution_id="+this.alchemy_attic.id).then(resp=>{
                if(resp){
                    this.$message.success(resp.message);
                    this.initPersonsNoInstitution();
                    this.initAlchemyAtticMember();
                }
            });
        },
        //获取可以任命管理者的人员
        initManager(){
            this.$getRequest("/sys/alchemy_attic/manager?person_rank=20&sect_id="+this.sect_id).then(resp=>{
              if(resp){
                this.managers = resp.obj;
              }
            })
        },
        //选中值发生变化时触发
        getName(){
          this.$nextTick(()=>{
            this.manager_name = this.$refs.labelRef.selected.label;
          });
       },
       //判断勾选
        selectable(row,index) {
          if(row.isDelete=="0"){
            //禁用
            return false;
          }else {
            return true;
          }
        },
        //初始化丹方
        initHomeRemedy(){
            this.$getRequest("/sys/home_remedy/query?alchemy_attic_id="+this.alchemy_attic.id+"&sect_id="+this.sect_id+"&currentPage="+this.currentPage3+"&size="+this.size3).then(resp=>{
              if(resp){
                    this.home_remedies = resp.data;
                    this.total3 = resp.total;
                }
            })
        },
        //丹药前期准备
        alchemyHandler(data){
            this.items=[];
            this.medicinalPellet.name=data.name;
            this.medicinalPellet.sect_id=data.sect_id;
            this.medicinalPellet.sect_name=data.sect_name;
            this.medicinalPellet.alchemy_attic_id=data.alchemy_attic_id;
            this.medicinalPellet.alchemy_attic_name=data.alchemy_attic_name;
            this.medicinalPellet.brief_introduction=data.brief_introduction;

            let content = data.content.split("、");
            for(let i=0;i<content.length;i++){
              let item = content[i].split("*");
               for(let j=0;j<item[1];j++){
                 this.items.push({type: 'info', label: item[0]})
               }


            }

        },
        //炼制
        refine(){
            let num = this.items.filter(item=>{
                return item.type==="success"
            }).length;
            if(num !== this.items.length){
                return this.$message.warning("材料不够，无法炼制丹药，请先收齐所需材料！")
            }
            this.$postRequest("/sys/medicinal_pellet/refine","medicinalPellet="+this.medicinalPellet+"&institution_id="+this.alchemy_attic.id).then(resp=>{
                if(resp){
                    this.$message.success(resp.message);
                }
            });
        },
        handleChange(value, direction, movedKeys) {
          console.log(value, direction, movedKeys);
            let arr = []
            let rightMaterial = [];
            let topItems = this.items;
            this.material.forEach((item, index) => {
              for(let i=0;i<movedKeys.length;i++){
                if(movedKeys[i]===item.key){
                  rightMaterial.push({label:item.label});

                }
              }
            })
          topItems.forEach((item, index) => {
            console.log(item.label);
            rightMaterial.forEach((rm, index) => {
              if(item.label===rm.label ){
                item.type = direction==="right"?"success":"info";
                  direction==="right"?this.medicinalPellet.material_ids.push(rm.id):this.medicinalPellet.material_ids.remove(rm.id)
              }
            })
          })
          this.items = topItems;
          this.dialogVisible3 = true;
          //计算进度条
          let num = 0;
          this.items.forEach((item, index) => {
              if(item.type==="success"){
                 num++;
              }
          });
          this.percentage = this.items.length===0?0:Math.ceil(num/this.items.length * 100);
        },
        //初始化材料
        initMaterial(){
            this.$getRequest("/sys/material/queryMaterial?sect_id="+this.sect_id+"&search_text="+this.search_text+"&currentPage="+this.currentPage4+"&size="+this.size4).then(resp=>{
                if(resp){
                    var listData = resp.data;
                    // 处理字段别名
                    this.material = listData.map((value, index) => {
                        return {
                            label: value.name,
                            key: value.seq_no,
                            obj: value,
                            id:value.id,
                            disabled:false,
                        };
                    });
                    this.total4 = resp.total;
                    this.page.total = resp.total;
                }
            });
        },
      handleCurrentChange(){

      },
    },
    mounted() {
        this.initAlchemyAttic();
        this.initManager();
        this.initMaterial();
    }
}
</script>
<style scoped>
.transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
}
</style>
